<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 可以看到插值表达式中有一些逻辑，当我们不希望在插值表达式中有逻辑时，就可以使用计算属性 -->
        <!-- {{firstName+" "+lastName}} -->
        {{fullName}}
        {{fullName}}
        <!-- 只会打印一次“计算了一次” -->

        {{fullName2()}}
        {{fullName2()}}
        <!-- 打印两次 -->

    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                firstName: "Dell",
                lastName: "Lee",
            },
            // 2.vue方法
            methods: {
                fullName2: function () {
                    console.log("方法没有缓存，会执行多次");
                    return this.firstName + this.lastName
                }
            },

            // 1.计算属性computed：特点是内置缓存的，当我们计算一次后，下次计算就会直接拿到结果，提高了性能。而v-if/方法，没有缓存功能。所以对于需要频繁修改的数据，使用计算属性computed
            computed: {
                fullName: function () {
                    // 只会打印一次，因为计算属性具有缓存
                    console.log("计算属性有缓存，渲染时会直接拿到结果");
                    return this.firstName + this.lastName
                }
            },
        })
    </script>
</body>

</html>